<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HappyChat 聊天室</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/js/layui/css/layui.css">
  <link rel="stylesheet" href="/static/css/room.css">
</head>
<body>
<header class="service-header">
  <div class="service-log">

  </div>
  <div class="service-title"><h2>HappyChat 聊天室</h2></div>
  <div class="service-info">
    <i class="layui-icon layui-icon-friends"></i>
    <span class="kefu">欢迎： 小白</span>
    <!--<span class="login-out">退出</span>-->
  </div>
</header>
<div class="layui-row service-content">

  <div class="layui-col-xs2 visitor-list" id="visitor-list"></div>
  <div class="layui-col-xs8 service-chat-box">
    <div class="chat-container">
      <div class="layui-row chat-header" id="now-chat-box" style="text-align: center;line-height: 41px">
        <p style="color:#1E9FFF">欢迎大家访问 HappyChat 聊天室，文明交流，你我共勉。</p>
      </div>
      <div class="layui-row chat-body">
        <div class="chat-box" id="chat-area"></div>
      </div>

      <div class="layui-row chat-footer">
        <div class="text-holder">
          <textarea id="textarea" placeholder="请输入"></textarea>
        </div>
        <div class="send-bar">
          <div class="tool-box">
            <i class="layui-icon layui-icon-face-smile" id="face" title="表情"></i>
            <i class="layui-icon layui-icon-picture" id="image" title="图片"></i>
            <!--<i class="layui-icon" style="font-size: 20px;" id="file" title="文件">&#xe61d;</i>-->
          </div>
          <div class="send-btn-div">
            <input type="button" value="发送" class="send-input" id="sendBtn">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-col-xs2 service-bar">
    <div class="layui-tab" style="margin: 0">
      <ul class="layui-tab-title">
        <li class="layui-this">广告位</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">

          <a href="http://whisper.baiyf.com" target="_blank" class="fly-zanzhu" style="background-color: #009688; background-image: linear-gradient(to right,#009688,#5FB878);">whisper开源客服系统</a>
          <a href="http://baiyf.com/ichat" target="_blank" class="fly-zanzhu" time-limit="2019-09-01" style="background-color: #0063FF;">ichat webim社交系统</a>
          <a href="http://baiyf.com/snake" target="_blank" class="fly-zanzhu" time-limit="2017.09.25-2099.01.01" style="background-color: #20222A; background-image: linear-gradient(to right,#20222A,#3E4251);">snake开源通用后台</a>

        </div>
      </div>
    </div>
  </div>
</div>

<script id="mine" type="text/html">
  <div class="clearfloat">
    <div class="author-mine-name">
      <small class="chat-date">{{ d.time }}</small>
      &nbsp;&nbsp;&nbsp;
      <small>{{ d.name }}</small>
    </div>
    <div class="right">
      <div class="chat-message">{{ replaceContent(d.message) }}</div>
      <div class="chat-avatars">
        <img src="{{ d.avatar }}">
      </div>
    </div>
  </div>
  <div style="clear:both"></div>
</script>

<script id="other" type="text/html">
  <div class="clearfloat">
    <div class="author-other-name">
      <small>{{ d.name }}</small>
      &nbsp;&nbsp;&nbsp;
      <small class="chat-date">{{ d.time }}</small>
    </div>
    <div class="left">
      <div class="chat-avatars">
        <img src="{{ d.avatar }}">
      </div>
      <div class="chat-message">{{ replaceContent(d.message) }}</div>
    </div>
  </div>
  <div style="clear:both"></div>
</script>

<script id="list" type="text/html">
  <div class="visitor-card" id="u-{{ d.uid }}" style="border-bottom: 1px solid #eeeeee">
    <img src="{{ d.avatar }}" class="head-msg"/>
    <div class="msg">
      <p>
        <span class="name">{{ d.name }}</span>
        <span class="visitor-card-time">{{ d.location }}</span>
      </p>
    </div>
  </div>
</script>

<audio id="ding" src="/static/voice/ding.mp3">不支持 audio 标签</audio>

<script>
  var uid = '{$uid}';
  var name = '{$name}';
  var avatar = '{$avatar}';
  var token = '{$token}';
</script>
<!-- 转接提示层 -->
<script src="/static/js/layui/layui.js"></script>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/socket.io.js"></script>
<script src="/static/js/main.js"></script>
</body>
</html>
